<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>教练管理</title>
    <link rel="stylesheet" href="../css/fore/order.css">
    <link rel="stylesheet" href="../css/fore/index.css">
    <script src="../js/jquery/2.0.0/jquery.min.js"></script>
    <link href="../css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
    <script src="../js/bootstrap/3.3.6/bootstrap.min.js"></script>
    <script src="../js/vue.min.js"></script>
    <script src="../js/fetch.min.js"></script>
    <script src="../js/axios.min.js"></script>
</head>
<body>
<div id="allContent">
<div class="header">
    <div class="top">
        <div class="top-logo fl">
            <a id="logo" href="#nowhere" target="_blank"><img src="../img/car-logo.png" alt="" class="fl"
                                                              style="margin-top: 20px;width: 45px"><span
                    class="top-logo-text">后台教练管理页面</span></a>
        </div>
        <div class="top-login">
            <div class="loginbox">
                <div class="loginbox-r" title="个人中心">
                    <img  v-if="user != null" :src="['../img/coach/' + user.pic]" class="img-circle">
                    <a v-else href="../login.html" target="_self"  style="line-height: 80px;" class="loginbtn">
                        登录
                    </a>
                </div>
            </div>
        </div>
    </div>
    <div class="header-nav">
        <ul id="nav-list">
            <li class="nav-list-li"><a href="#nowhere">时间安排</a></li>
            <li class="nav-list-li"><a href="coach_admin_student.html">考试管理</a></li>
            <li class="nav-list-li"><a href="mystudent.html">我的学员</a></li>
        </ul>
    </div>
</div>

<div class="headlineC">
    <div class="headline">
        <div class="icon fl"><img src="../img/headline_icon.png" ></div>
        <h2 class="headline-title fl">我的时间</h2>
        <div class="links fr">
            <a @click="recover" href="#nowhere" class="goBack fl" style="" bosszone="SC_cBack">回到今天</a>
            <a href="javascript:;" class="calendar" bosszone="SC_cCalendar">
                <img src="../img/calendar.png" alt="" width="30" style="margin-top: -4px">
                <input type="date" class="links-date" v-model.date="date">
            </a>
        </div>
        <div class="page">
            <a @click="forward" href="#nowhere" class="forward" bosszone="SC_cB7">&lt;&nbsp;前七天</a>
            <span class="date">{{currentStr}}</span>
            <a @click="backward" href="#nowhere" class="backward" bosszone="SC_cA7">后七天&nbsp;&gt;</a>
        </div>
    </div>
    <div class="stream">
        <div class="item" v-for="sc, ii in scs" :style="{'margin-bottom': ii == 6 ? height1 : height2}">
            <div class="date1 today" :style="{'background-color': sc.date == today ? color2 : color3}">
                <span>{{sc.date == today ? "今天" : sc.week}}</span>
                <a style="margin-right: 80px" @click="reset(ii,0,8,0)">全天不在</a>
                <a @click="reset(ii,0,-4,0)">下午不在</a>
                <a @click="reset(ii,0,4,0)">上午不在</a>
            </div>

            <table :id="['tab' + ii]" class="list-time listPage table table-striped table-bordered table-hover">
                <thead>
                <tr class="success">
                    <th>时间段</th>
                    <th>预约人数</th>
                    <th>查看学员</th>
                    <th>我的状态</th>
                    <th>重设状态</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="index in 8" :style="{'background-color': sc.time[index-1] == -1 ? color1 : color3}">
                    <td>{{periods[index-1]}}</td>
                    <td :id="['td' + (index-1)]">
                        {{sc.time[index-1] >=0 ? sc.time[index-1] : 0}}
                    </td>
                    <td aria-expanded="false" data-toggle="collapse" :href="'#collapse' + ii"
                        @click="getStudent($event,ii,index-1)"><a class="glyphicon glyphicon-list-alt"></a></td>
                    <td>{{sc.time[index-1]==-1 ? "不在场地" : "正常工作"}}</td>
                    <td v-if="sc.time[index-1] == -1">
                        <a class="glyphicon glyphicon-pencil" @click="reset(ii,index-1,1,-1)"></a>
                    </td>
                    <td v-else>
                        <a class="glyphicon glyphicon-pencil" @click="reset(ii,index-1,1,1)"></a>
                    </td>
                </tr>
                </tbody>
            </table>
            <div :id="['collapse' + ii]" class="panel panel-info panel-collapse collapse" role="tabpanel"
                 aria-labelledby="headingThree">
                <div class="panel-heading">{{periods[periodIds[ii]]}}&nbsp预约的学员</div>
                <div class="panel-body">
                    <sapn v-for="rs, hh in reservationStudents[ii]">
                        姓名：{{rs.name}} &nbsp 电话：{{rs.telephone}}&nbsp &nbsp &nbsp
                    </sapn>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
<div class="footer">
    <p>
        Good CarTeacher©2018 | QQ:123456789
        <a href="https://baidu.com">|关于我们</a>
        <a href="https://sports.qq.com/">|驾校登录</a>
    </p>
</div>

<script>
    var url = "../admin_coach_time";
    new Vue({
        el: '#allContent',
        data: {
            trStyle: "background-color: #3c763d",
            color1: "#d43f3a",
            color2: "#F23D63",
            color3: "",
            height1: "65px",
            height2: "",
            scs: [],
            today: "",
            currentStr: "",    //中间的日期字符串
            current: "",       //当前页面第一天的日期
            t: "",             //请求参数
            user: [],           // 用户信息
            baseUrl: "../admin_coach_time",
            periods: ["8:00~9:00", "9:00~10:00", "10:00~11:00",
                "11:00~12:00", "13:00~14:00", "14:00~15:00",
                "15:00~16:00", "16:00~17:00"
            ],
            //每一天中所查看的那一列
            periodIds: [0, 0, 0, 0, 0, 0, 0],
            //每一天中所查看的那一列预约的学生
            reservationStudents: [null, null, null, null, null, null, null],
            //日期控件的日期
            date: []
        },
        mounted: function () {
            var self = this;
            url = this.baseUrl;
            console.log("this1------------------> " + this);
            fetch(url).then(function (response) {
                response.json().then(function (jsonObject) {
                    console.log(jsonObject);
                    var date = new Date();
                    date.setHours(0);
                    date.setMinutes(0);
                    date.setSeconds(0);
                    date.setMilliseconds(0);
                    self.today = date.getTime();
                    console.log(self.today);
                    self.scs = jsonObject.scs; //数组
                    self.currentStr = jsonObject.currentStr;
                    self.user = jsonObject.user;
                    self.current = jsonObject.currentDate;
                    console.log(self.user);
                    console.log("this2--------> " + self)
                }).catch(function (err) {
                    console.log("Fetch错误：" + err);
                })
            });
        },
        methods: {
            forward: function () {
                var d = this.stringToDate();
                d.setDate(d.getDate() - 7);
                this.t = d.getTime();
                this.request(d);
            },
            backward: function () {
                var d = this.stringToDate();
                d.setDate(d.getDate() + 7);
                this.t = d.getTime();
                this.request(d);
            },
            recover: function () {//回到今天

                var d = new Date();
                d.setHours(0);
                d.setMinutes(0);
                d.setSeconds(0);
                d.setMilliseconds(0);
                this.t = d.getTime();
                this.request(d);
            },
            getStudent: function (e, i, j) {   //获取在i天j列预约的学生
                self = this;
                var d = this.stringToDate();
                d.setDate(d.getDate() + i);
                var dom = e.target.parentElement;
                //如果是 expanded 不用进行下面数据的更新
                if (dom.getAttribute("aria-expanded") == "true")
                    return;
                url = "../admin_coach_listByPeriod?j=" + j + "&t=" + d.getTime();

                console.log("url--------->  " + url);

                axios.get(url).then(function (response) {
                    var ss = response.data.ss;
                    self.periodIds[i] = j;
                    self.reservationStudents[i] = ss;
                    // 用于进行数据更新
                    self.periods = ["8:00~9:00", "9:00~10:00", "10:00~11:00",
                        "11:00~12:00", "13:00~14:00", "14:00~15:00",
                        "15:00~16:00", "16:00~17:00"
                    ];

                });
            },
            reset: function (i, j, type, flag) {   //第i天的第j列 type请假类型
                self = this;
                var d = this.stringToDate();
                d.setDate(d.getDate() + i);
                url = "../admin_coach_setTime?j=" + j + "&t=" + d.getTime() + "&type=" + type + "&flag=" + flag;
                console.log(url);
                axios.get(url).then(function (response) {
                    var success = response.data.success;
                    if (success == -200) {
                        alert("只能提前一天请假");
                    }
                    else {
                        var time = response.data.time;
                        self.scs[i].time = time;
                    }

                    // // $("#tab"+i +" #td" + j)[0].innerText=num;
                    // self.$set(self.scs[i].reservation,j,!self.scs[i].reservation[j]);
                    // self.$set(self.scs[i].time,j,num);
                    // self.$set(self.scs[i].time,j,response.data.time[j]);

                });
            },
            request: function (d) {
                var self = this;
                url = this.baseUrl + "?t=" + d.getTime();
                console.log(url);
                axios.get(url).then(function (response) {

                    self.scs = response.data.scs; //数组
                    self.currentStr = response.data.currentStr;
                    self.current = response.data.currentDate;
                    console.log("self.current " + self.current);
                })
            },
            stringToDate: function () {       //将字符串2018-10-22转换为date
                var arr = this.current.split('-');
                var year = parseInt(arr[0]);
                var month = parseInt(arr[1]) - 1;
                var date = parseInt(arr[2]);
                var tempD = new Date();
                tempD.setFullYear(year);
                tempD.setDate(1);                // 10/31坑了我两个小时 当 date  是  31 时 设置月份为小月  月份会自动增加 在设置date 月份就会出错
                tempD.setMonth(month);
                tempD.setDate(date);
                tempD.setHours(0);
                tempD.setMinutes(0);
                tempD.setSeconds(0);
                tempD.setMilliseconds(0);
                return tempD;
            }
        },
        watch: {
            date: function (val) {
                this.current = val;
                var d = this.stringToDate();
                this.request(d);
            }
        }
    });
</script>
</body>
</html>